import 'package:flutter/material.dart';

class TestScrollNotificationPage extends StatefulWidget {
  const TestScrollNotificationPage({Key? key}) : super(key: key);

  @override
  _TestScrollNotificationPageState createState() => _TestScrollNotificationPageState();
}

class _TestScrollNotificationPageState extends State<TestScrollNotificationPage> {
  String _progress = "0%";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("scroll notification"),),
      body: Scrollbar(
        child: NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification notification) {
            final pixels = notification.metrics.pixels;
            final maxScrollExtent = notification.metrics.maxScrollExtent;
            if (maxScrollExtent > 0.0) {
              final progress = pixels / maxScrollExtent;
              setState(() {
                _progress = "${(progress * 100).toInt()}%";
              });
            }
            return false;
          },
          child: Stack(
            children: [
              ListView.separated(
                itemCount: 300,
                separatorBuilder: (BuildContext context, int index) => const Divider(height: 0.5, color: Colors.teal,),
                itemBuilder: (BuildContext context, int index) => ListTile(title: Text("$index"),),
              ),
              CircleAvatar(
                radius: 30,
                child: Text(_progress),
                backgroundColor: Colors.green,
              )
            ],
          ),
        ),
      ),
    );
  }
}